<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hollywood blockbuster</title>

    <link rel="stylesheet" href="css/style.css">


</head>

<body>

<div class="demo-cont">
    <!-- slider start -->
    <div class="fnc-slider example-slider">
        <div class="fnc-slider__slides">
            <!-- slide start -->
            <div class="fnc-slide m--blend-green m--active-slide">
                <div class="fnc-slide__inner">
                    <div class="fnc-slide__mask">
                        <div class="fnc-slide__mask-inner"></div>
                    </div>
                    <div class="fnc-slide__content">
                        <h2 class="fnc-slide__heading">
                            <div class="fnc-slide__heading-line">
                                <span>Black</span>
                            </div>
                            <div class="fnc-slide__heading-line">
                                <span>Widow</span>
                            </div>
                        </h2>
                        <button type="button" class="fnc-slide__action-btn">
                            Credits
                            <span data-text="Credits">click me</span>
                        </button>
                    </div>
                </div>
            </div>
            <!-- slide end -->
            <!-- slide start -->
            <div class="fnc-slide m--blend-dark">
                <div class="fnc-slide__inner">
                    <div class="fnc-slide__mask">
                        <div class="fnc-slide__mask-inner"></div>
                    </div>
                    <div class="fnc-slide__content">
                        <h2 class="fnc-slide__heading">
                            <div class="fnc-slide__heading-line">
                                <span>Captain</span>
                            </div>
                            <div class="fnc-slide__heading-line">
                                <span>America</span>
                            </div>
                        </h2>
                        <button type="button" class="fnc-slide__action-btn">
                            Credits
                            <span data-text="Credits">click me</span>
                        </button>
                    </div>
                </div>
            </div>
            <!-- slide end -->
            <!-- slide start -->
            <div class="fnc-slide m--blend-red">
                <div class="fnc-slide__inner">
                    <div class="fnc-slide__mask">
                        <div class="fnc-slide__mask-inner"></div>
                    </div>
                    <div class="fnc-slide__content">
                        <h2 class="fnc-slide__heading">
                            <div class="fnc-slide__heading-line">
                                <span>Iron</span>
                            </div>
                            <div class="fnc-slide__heading-line">
                                <span>Man</span>
                            </div>
                        </h2>
                        <button type="button" class="fnc-slide__action-btn">
                            Credits
                            <span data-text="Credits">click me</span>
                        </button>
                    </div>
                </div>
            </div>
            <!-- slide end -->
            <!-- slide start -->
            <div class="fnc-slide m--blend-blue">
                <div class="fnc-slide__inner">
                    <div class="fnc-slide__mask">
                        <div class="fnc-slide__mask-inner"></div>
                    </div>
                    <div class="fnc-slide__content">
                        <h2 class="fnc-slide__heading">
                            <div class="fnc-slide__heading-line">
                                <span>Thor</span>
                            </div>
                            <div class="fnc-slide__heading-line">
                                <span>Just Thor</span>
                            </div>
                        </h2>
                        <button type="button" class="fnc-slide__action-btn">
                            Credits
                            <span data-text="Credits">click me</span>
                        </button>
                    </div>
                </div>
            </div>
            <!-- slide end -->
        </div>
        <nav class="fnc-nav">
            <div class="fnc-nav__bgs">
                <div class="fnc-nav__bg m--navbg-green m--active-nav-bg"></div>
                <div class="fnc-nav__bg m--navbg-dark"></div>
                <div class="fnc-nav__bg m--navbg-red"></div>
                <div class="fnc-nav__bg m--navbg-blue"></div>
            </div>
            <div class="fnc-nav__controls">
                <button class="fnc-nav__control">
                    Black Widow
                    <span class="fnc-nav__control-progress"></span>
                </button>
                <button class="fnc-nav__control">
                    Captain America
                    <span class="fnc-nav__control-progress"></span>
                </button>
                <button class="fnc-nav__control">
                    Iron Man
                    <span class="fnc-nav__control-progress"></span>
                </button>
                <button class="fnc-nav__control">
                    Thor
                    <span class="fnc-nav__control-progress"></span>
                </button>
            </div>
        </nav>
    </div>
    <!-- slider end -->
    <div class="demo-cont__credits">
        <div class="demo-cont__credits-close"></div>
        <h2 style="">Homework</h2>
        <h2>千图网</h2>
        <a href="千 图 网/index.html" class="">click me</a>
        <h2 class="">小米商城</h2>
        <a href="小米商城/index.html" class="">click me</a>
        <h2 class="">随机</h2>
        <a href="#" class="">click me</a>
    </div>
</div>

<script src="js/index.js"></script>

</body>
</html>
